<template>
  <div>
    <div class="flex align-center m-1" v-for="(item, i) in finalProps" :key="i">
      <span class="props-lable">
        {{ item.name }}
        <span v-if="item.name">:</span>
      </span>
      <component
        class="flex-1 ml-1"
        :is="item.component"
        v-bind="item.extraProps"
        :style="item.styleProps"
        v-on="item.events"
        :[item.valueProp]="item.value"
      >
        <template v-if="item.subComponent && item.options">
          <component
            :is="item.subComponent"
            v-for="subItem in item.options"
            :value="subItem.value"
            :label="subItem.text"
            :key="subItem.value"
          >
            <RenderVnode v-if="subItem.vNode" :vNode="subItem.vNode"></RenderVnode>
          </component>
        </template>
      </component>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";
import { reduce } from "lodash-es";
import { ITextComponentProps } from "fow-code-components/lib/defaultProps.d";
import { mapPropsToForms, IPropToForm } from "@/propsMap.tsx";
import RenderVnode from "@/components/RenderVnode.ts";
import IconSwitch from "@/components/IconSwitch/index.vue";
import ImageProcesser from "@/components/ImageProcesser/index.vue";
import BackgroundProcesser from "@/components/BackgroundProcesser/index.vue";

interface IFormProps extends IPropToForm {
  value?: string; // 值
  eventName?: string; // 事件名称
  events?: { [key: string]: (e: any) => void };
}
export default defineComponent({
  name: "PropsTable",
  components: {
    RenderVnode,
    IconSwitch,
    ImageProcesser,
    BackgroundProcesser,
  },
  props: {
    propsData: {
      type: Object,
    },
  },
  emits: ["change"],
  setup(props, context) {
    // 根据props转换组件渲染器
    const finalProps = computed(() => {
      // 变量对象
      return reduce(
        props.propsData,
        (result, value, key) => {
          const newKey = key as keyof ITextComponentProps;
          const item = mapPropsToForms[newKey];
          // 匹配映射
          if (item) {
            const {
              valueProp = "model-value",
              eventName = "change",
              name,
              component,
            } = item as IFormProps;
            const newItem: IFormProps = {
              ...item,
              name,
              eventName,
              events: {
                [eventName]: (v: any) => {
                  context.emit("change", {
                    key,
                    v: item.afterAdaptiveform ? item.afterAdaptiveform(v) : v,
                  });
                },
              },
              valueProp,
              component,
              value: item.beforeAdaptiveform ? item.beforeAdaptiveform(value) : value,
            };
            result[newKey] = newItem;
          }
          return result;
        },
        {} as { [key: string]: IFormProps }
      );
    });
    return {
      finalProps,
    };
  },
});
</script>

<style lang="scss" scoped>
.props-lable {
  width: 70px;
}
</style>
